<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侦听器</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.监听器学习 如果需要自动触发则使用监听器 -->
			姓:<input type="text" v-model.lazy="firstName" /><br>
			名:<input type="text" v-model.lazy="lastName" /><br/>
		全称:{{fullName}}
		
		<hr />
		
		<!-- 过滤器 如果对数据的格式进行修改 小写转大写 日期格式转换... -->
		<input type="text" v-model="username" /><br />
		用户名:{{username | upper |lower}}
		
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			
			//定义过滤器,全部大写
			Vue.filter("upper",function(value){
				return value.toUpperCase()
			})
			//2.箭头函数用法 全部小写  
			//注意事项: 如果没有参数()不能省略
			Vue.filter("lower",(value)=>{
				return value.toLowerCase()
			})
			
			const app = new Vue({
				el: "#app",
				data: {
					firstName: '',
					lastName: '',
					fullName: '',
					username: ''
				},
				//key:value 格式
				methods: {
					
				},
				//定义监听器
				watch: {
					//当数据发生变化时则会传递数据到监听器中
					firstName(value){
						this.fullName = value + this.lastName
					},
					lastName(value){
						this.fullName = this.firstName + value
					}
				}
			})
		</script>
	</body>
</html>
